<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志填写</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">
    <link rel="stylesheet" href="../../lib/fullCalendar/css/fullCalendar.css">

    <style>


        body{
            user-select: none;
        }

    </style>

</head>
<body>

<div id="app">

    <el-row type="flex" justify="space-around">

        <el-col :span="14">

            <div id="calendar"></div>

        </el-col>

    </el-row>

    <!--    ===========================-->

    <div id="add_empl">
        <el-row type="flex" justify="space-around">

            <el-col :span=10>

                <el-dialog title="添加日志" :visible.sync="visitAddEmpl">

                    <el-form label-width="100px" label-position="right" :ref="form" :model="form">

                        <el-form-item label="申请人" prop="name">
                            <el-input
                                    v-model="form.name"
                                    type="text"
                                    clearable
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="项目" >

                            <el-select v-model="form.selectProject">
                                <el-option
                                        v-for="item in projectList"
                                        :key="item.projectId"
                                        :value="item.projectId"
                                        :label="item.projectName"
                                ></el-option>

                            </el-select>


                        </el-form-item>

                        <el-form-item label="审核人">
                            <el-transfer v-model="form.reviewer"
                                         :data="reviewerList"
                                         filterable
                                         :titles=['审核人列表','已选审核人']
                            ></el-transfer>

                        </el-form-item>


                        <el-form-item label="备注" prop="desc">

                            <el-input type="textarea"
                                      v-model="form.desc"
                                      :rows=3
                                      maxlength="100"
                                      show-word-limit
                            ></el-input>

                        </el-form-item>


                    </el-form>


                    <div slot="footer" class="dialog-footer">
                        <el-button @click="visitAddEmpl = false" round>取 消</el-button>
                        <el-button type="primary" @click="submitApply" round>确 定</el-button>
                    </div>

                </el-dialog>

            </el-col>

        </el-row>
    </div>

    <!--========================日志详情弹框================================================-->
    <div id="logDetail" style="user-select: none">
        <el-row type="flex" justify="space-around">

            <el-col :span=10>

                <el-dialog title="查看日志详情" :visible.sync="visitDetail">

                    <el-form label-width="100px" label-position="right" :ref="detailForm" :model="detailForm">

                        <el-form-item label="申请人" prop="name">
                            <el-input v-model="detailForm.name" readonly></el-input>
                        </el-form-item>

                        <el-form-item label="项目">

                            <el-input v-model="detailForm.projectName" readonly></el-input>

                        </el-form-item>


                        <el-form-item label="备注" prop="desc">

                            <el-input v-model="detailForm.desc" readonly></el-input>

                        </el-form-item>

                        <el-form-item label="审核人">

                            <el-input v-model="detailForm.reviewerName" readonly></el-input>

                        </el-form-item>


                        <el-form-item label="审核详情">

                            <el-timeline>

                                <el-timeline-item :timestamp="detailForm.applyTime" placement="top">
                                    <el-card>
                                        <el-tag>提交申请</el-tag>
                                    </el-card>

                                </el-timeline-item>

                                <el-timeline-item :timestamp="detailForm.reviewTime" placement="top">
                                    <el-card>
                                        <span slot="header">审核结果</span>
                                        <el-tag v-if="detailForm.status=='审核中'">

                                            <i class="el-icon-loading"></i>
                                            {{detailForm.status}}
                                        </el-tag>
                                        <el-tag type="success" v-if="detailForm.status=='审核通过'">

                                            <i class="el-icon-success"></i>
                                            {{detailForm.status}}
                                        </el-tag>
                                        <el-tag type="danger" v-if="detailForm.status=='审核拒绝'">

                                            <i class="el-icon-error"></i>
                                            {{detailForm.status}}
                                        </el-tag>
                                    </el-card>

                                </el-timeline-item>


                            </el-timeline>

                        </el-form-item>


                    </el-form>


                    <div slot="footer" class="dialog-footer">

                        <el-popover
                            placement="top"
                            width="160"
                            v-model="visitPop">
                        <p>确定删除吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="visitPop = false">取消</el-button>
                            <el-button type="danger" size="mini" @click="delLog">删除</el-button>
                        </div>


                        <el-button round slot="reference">删除</el-button>
                        <el-button @click="visitDetail = false" round slot="reference">确定</el-button>

                    </el-popover>
                    </div>

                </el-dialog>

            </el-col>

        </el-row>
    </div>


</div>

</body>
</html>

<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>
<script src="../../lib/layui-2.4.5/layui.all.js"></script>
<script src="../../lib/fullCalendar/js/moment.js"></script>
<script src="../../lib/fullCalendar/js/fullCalendar.js"></script>


<script>

    let isGetReviewer = false;
    let isGetEmplList = false;
    let resultData = [];
    var app = new Vue({

        el: "#app",
        data: {

            form: {
                name: '',
                desc: '',
                reviewer: [],
                selectProject: ''

            },

            detailForm: {

                name: '',
                projectName: '',
                reviewerName: '',
                desc: '',
                status: '',
                applyTime: '',
                reviewTime: ''


            },

            projectList: [],
            visitAddEmpl: false, //显示dialog
            visitDetail: false,
            visitPop: false,
            userId: '',
            emplList: [],
            reviewerList: []
        },
        methods: {

            // //弹出新增日志
            // addEmplLog: function (date) {
            //     layer.open({
            //         type: 1,
            //         title: '新增日志',
            //         shadeClose: true,
            //         shade: 0.3,
            //         area: ['80%', '80%'],
            //         content: $('#add_empl') //iframe的url
            //     });
            // }

            submitApply: function () {

                let date = sessionStorage.getItem("date");

                if (app.form.selectProject === '') {
                    app.$message.error("请选择项目");
                    return;
                }

                if (app.form.reviewer.length === 0) {
                    app.$message.error("请选择审核人");
                    return;
                }
                if (app.form.reviewer.length > 1) {
                    app.$message.error("审核人只能为一个");
                    return;
                }
                if (app.form.desc === '') {
                    app.$message.error("请填写备注");
                    return;
                }
                if (app.form.reviewer[0] === app.userId){
                    app.$message.error("审核人不能为自己");
                    return;
                }


                $.ajax({

                    url: '/empl/submitEmpl',
                    type: 'get',
                    data: {

                        'userId': app.userId,
                        'projectId': app.form.selectProject,
                        'date': formatDate(date),
                        'logDesc': app.form.desc,
                        'reviewerId': app.form.reviewer[0]

                    },
                    success: function (result) {

                        if (result.success === true) {

                            app.$notify.success({

                                title: '成功',
                                message: result.msg
                            });

                            app.visitAddEmpl = false;
                            app.emplList = [];
                            isGetEmplList = false;
                            getEmplList();
                            reloadCalendar();
                            isGetEmplList = true;
                            app.resetForm();


                        } else {
                            app.$notify.error({

                                title: '失败',
                                message: result.msg
                            })

                        }

                    }


                })


            },
            getProject: function () {

                $.ajax({

                    url: '/project/getmyproject',
                    type: 'get',
                    data: {'userId': app.userId},
                    success: function (result) {

                        if (result.success === true) {

                            app.projectList = result.data;

                        } else {

                            app.$notify.warn({

                                title: '警告',
                                message: result.msg
                            })
                        }
                    }
                })


            },


            getReviewer: function () {


                if (isGetReviewer) {
                    return;
                }
                $.ajax({

                    url: '/const/getReviewer',
                    type: 'get',
                    success: function (result) {

                        if (result.success === true) {

                            // app.reviewerList = result.data;

                            for (let data of result.data) {

                                app.reviewerList.push({
                                    key: data.userId,
                                    label: data.name

                                })
                            }


                            isGetReviewer = true;

                        } else {

                            app.$notify.error({
                                title: '错误',
                                message: result.msg
                            })
                        }

                    }
                });
            },

            delLog: function () {

                let logId = sessionStorage.getItem('logId');
                // alert("删除")
                $.ajax({

                    url: '/empl/deleteLog',
                    type: 'get',
                    data: {'logId': logId},
                    success: function (result) {



                        if (result.success === true) {
                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            });

                            app.visitDetail = false;
                            app.visitPop = false;

                            // for (let i = 0; i < app.emplList.length; i++) {
                            //
                            //     if (logId === app.emplList[i].id) {
                            //         app.emplList.pop();
                            //
                            //         return;
                            //     }
                            //
                            // };
                            isGetEmplList = false;
                            app.emplList=[];
                            getEmplList();
                            reloadCalendar();
                            isGetEmplList = true;


                        } else {

                            app.$notify.error({
                                title: '失败',
                                message: result.msg
                            })

                        }

                    }

                })

            },


            resetForm: function () {
                    this.form.desc = '';
                    this.form.reviewer = [];
                    this.form.selectProject = '';


            }



        },
        created: function () {

            $.ajax({

                url: '/const/getCurrentUsername',
                type: 'get',
                success: function (result) {

                    if (result.success === true) {

                        app.userId = result.data.userId;
                        app.form.name = result.data.name;
                    }
                }

            });

            getEmplList();


        }


    });


    function reloadCalendar() {
        $("#calendar").fullCalendar('destroy');

        $("#calendar").fullCalendar({

            selectable: true,//允许用户点击时间
            themeSystem: 'bootstrap3',
            height: 720,
            droppable: true,
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

            header: {
                left: '',
                center: 'title',
                right: 'today, prev,next',
            },
            titleFormat: 'yyyy-MM',

            dayClick: function (date) {

                app.getReviewer();
                app.getProject();
                sessionStorage.setItem("date", date);
                app.visitAddEmpl = true;
            },
            eventClick: function (obj) {

                let logId = obj.id;
                for (let item of resultData) {

                    if (logId === item.logId) {
                        // console.log(item);
                        sessionStorage.setItem("logId", logId);
                        app.visitDetail = true;
                        app.detailForm.name = item.userName;
                        app.detailForm.projectName = item.projectName;
                        app.detailForm.reviewerName = item.reviewerName;
                        app.detailForm.desc = item.logDesc;
                        app.detailForm.status =
                            item.reviewStatus === '1' ? '审核中' :
                                item.reviewStatus === '2' ? '审核通过' : '审核拒绝';
                        app.detailForm.applyTime = formatDate(item.createTime);
                        app.detailForm.reviewTime = formatDate(item.reviewTime)

                    }

                }

            },

            events: app.emplList

        });
    }

    function getEmplList() {
        if (isGetEmplList) {
            return;
        }
        $.ajax({

            url: '/empl/getEmplLog',
            type: 'get',
            success: function (result) {

                if (result.success === true) {

                    // result.data;
                    for (let item of result.data) {

                        let status = item.reviewStatus;

                        // app.emplList.push({
                        //     id: item.logId,
                        //     title: item.logDesc,
                        //     start: formatDate(item.logTime),
                        //     status: item.reviewStatus
                        // });
                        if (status === '1'){
                            app.emplList.push({
                                id: item.logId,
                                title: item.logDesc,
                                start: formatDate(item.logTime),
                                status: status

                            })
                        }

                        else if (status==='2'){
                            app.emplList.push({
                                id: item.logId,
                                title: item.logDesc,
                                start: formatDate(item.logTime),
                                status: status,
                                backgroundColor: '#67C23A'

                            })
                        }else {
                            app.emplList.push({
                                id: item.logId,
                                title: item.logDesc,
                                start: formatDate(item.logTime),
                                status: status,
                                backgroundColor: '#F56C6C'

                            })
                        }

                        resultData = result.data;
                        reloadCalendar(app.emplList);
                    }
                } else {
                    app.$notify.error({
                        title: '错误',
                        message: result.msg
                    })
                    reloadCalendar(app.emplList);
                }

            }


        })
    }


    /**
     * 格式化时间 yyyy-MM-dd hh:mm:ss
     * @param dateTime
     * @returns {string}
     */
    function formatDate(dateTime) {

        let date = new Date(dateTime);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();


        if (mon < 10) mon = '0' + mon;
        if (day < 10) day = '0' + day;

        return year + '-' + mon + '-' + day;

    }
</script>